<template>
  <section class="address">
    <h3 style="text-align: center">PC地址生成</h3>
    <el-table :data="addressList" style="font-size: 16px" size="mini" :fit="true">
      <el-table-column type="index" label="序号" width="80px"/>
      <el-table-column label="收件人" prop="name" width="200px">
        <template slot-scope="scope">
          <el-input style="width: 150px" v-model="scope.row.name" v-if="scope.row.edit"/>
          <span v-else>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="地址">
        <template slot-scope="scope">
          <div v-if="scope.row.edit">
            <v-distpicker size="mini"  :province="scope.row.province" :city="scope.row.city" :area="scope.row.area" @selected="selAddress($event,scope.row)"></v-distpicker>
            <el-input style="width: 450px" v-model="scope.row.detail"></el-input>
          </div>
          <div v-else>
            {{scope.row.province+scope.row.city+scope.row.area+scope.row.detail}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="邮编" prop="postalCode" width="200px">
        <template slot-scope="scope">
          <el-input style="width: 150px" v-model="scope.row.postalCode" v-if="scope.row.edit"/>
          <span v-else>{{scope.row.postalCode}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button :type="scope.row.edit?'success':'primary'" @click="editBtn(scope.row)">{{scope.row.edit?'保存':'编辑'}}</el-button>
          <el-button type="danger" @click="delBtn(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 10px;float: right">
      <el-button type="success" @click="addBtn">添加</el-button>
      <el-button type="primary" @click="saveBtn">保存</el-button>
    </div>
  </section>
</template>

<script>
  import Cookies from 'js-cookie'
  import VDistpicker from 'v-distpicker'
  export default {
    name: "addressList",
    components: { VDistpicker },
    data(){
      return{
        addressList:[]
      }
    },
    watch:{
    },
    created(){
      let tmp = Cookies.get('addressList')
      if(tmp){
        console.log('存下来了么-----',JSON.parse(tmp))
        this.addressList=JSON.parse(tmp)

      }
    },
    methods:{
      selAddress(data,row){
        row.province = data.province.value
        row.city =data.city.value
        row.area =data.area.value
        row.postalCode=data.area.code
      },
      addBtn(){
        let form={
          name:'',
          postalCode:'',
          province: '', city: '', area: '',detail:'',
          edit:true
        }
        this.addressList.push(form)
      },
      editBtn(row){
        if(row.edit === undefined){
          Vue.set(row,'edit',true)
        }
        row.edit = !row.edit
      },
      delBtn(scope){
        this.addressList.splice(scope.$index,1)
      },
      saveBtn(){
        console.log('看下整个列表------',this.addressList)
        Cookies.set('addressList',this.addressList)
        let data=this.makeData()
        // return
        let url = window.URL.createObjectURL(new Blob([data]))
        let link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.setAttribute('download', '申请单.doc');
        document.body.appendChild(link);
        link.click();
      },
      makeData(){
        let data=''
        this.addressList.forEach(t=>{
          data += '<p>请寄：<span style="color:red">'+t.name+'</span></p><p>'+t.province+t.city+t.area+t.detail+'</p><p>'+t.postalCode+'</p>'
        })
        return data
      }
    }
  }
</script>

<style scoped>
  .address{
    padding: 20px;
    font-size: 20px;
    width: 80%;
    margin: auto;
  }
</style>
